<template>
  <div class="main">
    <div class="form_content">
      <NSpin :show="spinShow">
        <div class="content">
          <TableView>
            <template #table>
              <div style="height: 400rem;display: flex;">
                <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped flex-height
                  style="flex:1;" />
              </div>
            </template>

            <template #pagination>
              <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
                :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
                @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
                show-size-picker show-quick-jumper :suffix="() => '页'">
                <template #prefix>
                  <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
                </template>
              </NPagination>
            </template>
          </TableView>
        </div>
      </NSpin>
    </div>
    <div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 24rem;">
      <NButton type="primary" style="width: 115px;height: 50rem;" @click="emits('close')">确定</NButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NDataTable, useMessage, NSpin, NButton, NPagination } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { ref, h, onMounted, reactive } from 'vue'
import { sendRequest } from '@/utils/api'
import router from '@/router'
import TableView from '@/components/TableView.vue'

const message = useMessage()
const props = defineProps(['timeDate'])
const emits = defineEmits(['close'])

const columns: DataTableColumns = [
  {
    title: '人员',
    key: 'userName',
    width: 80,
    align: 'center'
  },
  {
    title: '部门',
    key: 'deptName',
    width: 100,
    align: 'center'
  },
  {
    title: '考勤类型',
    key: 'type',
    width: 100,
    align: 'center'
  },
  {
    title: '备注',
    key: 'remark',
    width: 200,
    align: 'center'
  },
  {
    title: '操作',
    key: 'cz',
    width: 100,
    align: 'center',
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: async () => {
            emits('close')
            const path = jumpRouterList.value.find((it: any) => it.code == row.code)?.routeOne
            if (path) router.push({ path, query: { id: row.resourceId as never } })
            else message.error('功能正在开发中')
          }
        },
        {
          default: () => '详情'
        }
      ),

    ]
  }
]
// 上一页下一页
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    getMineAttendanceInfo()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getMineAttendanceInfo()
  }
})
// 获取详情
const tableData: any = ref([])
const spinShow = ref(false)
const getMineAttendanceInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'attendance',
    api: 'workAttendanceRule',
    override: {
      params: {
        date: props.timeDate
      }
    }
  })
  if (error) return message.error(error.message), spinShow.value = false
  if (res.code !== 0) return message.error(res.msg), spinShow.value = false
  tableData.value = res.data.list
  paginationReactive.itemCount = res.data.totalCount
  spinShow.value = false
}
//获取需要跳转的路由
const jumpRouterList: any = ref([])
const getJumpRouterList = async () => {
  const [error, res] = await sendRequest({
    module: 'userCenter',
    api: 'getJumpRoute'
  })
  if (error) return
  if (res.code != 0) return
  jumpRouterList.value = res.data
}

onMounted(() => {
  getMineAttendanceInfo()
  getJumpRouterList()
})
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 60vw;
      height: 100%;
      padding: 18rem;
      background-color: #ebeceb;
      @include CommonFont;

      .table {
        width: 60vw;
        max-height: 400rem;
        height: 400rem;
      }
    }
  }
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
